// 此文件为NiiShop的主题变量，这些变量目前只能通过uni.scss引入才有效，另外由于
// uni.scss中引入的样式会同时混入到全局样式文件和单独每一个页面的样式中，造成微信程序包太大，
// 故uni.scss只建议放scss变量名相关样式，其他的样式可以通过main.js或者App.vue引入

//主题色配置
$nii-theme-color: #ff3d36;
//主题色不同透明度配置
$nii-theme-color-op-minize: rgba($color: $nii-theme-color, $alpha: 0.02);
$nii-theme-color-op-min: rgba($color: $nii-theme-color, $alpha: 0.05);
$nii-theme-color-op-01: rgba($color: $nii-theme-color, $alpha: 0.1);
$nii-theme-color-op-02: rgba($color: $nii-theme-color, $alpha: 0.2);
$nii-theme-color-op-03: rgba($color: $nii-theme-color, $alpha: 0.3);
$nii-theme-color-op-04: rgba($color: $nii-theme-color, $alpha: 0.4);
$nii-theme-color-op-05: rgba($color: $nii-theme-color, $alpha: 0.5);
$nii-theme-color-op-06: rgba($color: $nii-theme-color, $alpha: 0.6);
$nii-theme-color-op-07: rgba($color: $nii-theme-color, $alpha: 0.7);
$nii-theme-color-op-08: rgba($color: $nii-theme-color, $alpha: 0.8);
$nii-theme-color-op-09: rgba($color: $nii-theme-color, $alpha: 0.9);

//页面背景色配置
$nii-page-background-light: #F7F9FC;
$nii-page-background-dark: #111111;

//主题字体颜色
$nii-theme-text-color: #FFFFFF;

//模块背景色
$nii-section-background-light: #FFFFFF;
$nii-section-background-dark: #282828;

//模块阴影
$nii-section-shadow-light: 0rpx 0rpx 96rpx 0rpx rgba(137,137,137,0.05), 0rpx 24rpx 48rpx 0rpx rgba(137,137,137,0.1);
$nii-section-shadow-dark: 0rpx 0rpx 96rpx 0rpx rgba(40,40,40,0.1), 0rpx 24rpx 48rpx 0rpx rgba(40,40,40,0.2);
//模块阴影
$nii-section-less-shadow-light: 0rpx 0rpx 24rpx 0rpx rgba(137,137,137,0.05), 0rpx 6rpx 12rpx 0rpx rgba(137,137,137,0.1);
$nii-section-less-shadow-dark: 0rpx 0rpx 24rpx 0rpx rgba(40,40,40,0.1), 0rpx 6rpx 12rpx 0rpx rgba(40,40,40,0.2);

//导航背景色
$nii-nav-background-light: #FFFFFF;
$nii-nav-background-dark: #000000;

//字体主色
$nii-text-light: #1D1D1D;
$nii-text-dark: #F1F1F1;

//字体副色
$nii-text-vice-light: #3F3F3F;
$nii-text-vice-dark: #D4D4D5;

//字体淡色
$nii-text-less-light: #808080;
$nii-text-less-dark: #757575;

//字体样式
$nii-font-family: 'PingFangSC-Semibold, PingFang SC';

//基础样式
page {
	height: 100%;
	background: $nii-page-background-light;
	font-family: $nii-font-family;
	#nii-content {
		min-height: 100%;
		background: $nii-page-background-light;
		color: $nii-text-light;
		.text-white {
			color: #FFFFFF !important;
		}
		.text-dark {
			color: #000000 !important;
		}
		.bg-white {
			background: #FFFFFF !important;
		}
		.color {
			color: $nii-theme-color !important;
		}
		.bg_less {
			background: rgba(216,216,216,0.3);
			color: $nii-text-light;
		}
		.bg {
			background: $nii-theme-color !important;
			color: $nii-theme-text-color !important;
		}
		.page_bg_reverse {
			background: $nii-nav-background-dark;
			color: $nii-text-dark;
		}
		.bg_op_2 {
			background: $nii-theme-color-op-02;
			color: $nii-theme-color;
		}
		.bg_op_5 {
			background: $nii-theme-color-op-05;
			color: $nii-theme-color;
		}
		.bg_op_8 {
			background: $nii-theme-color-op-08;
			color: $nii-theme-color;
		}
		.bg_op_1 {
			background: $nii-theme-color-op-01 !important;
			color: $nii-theme-color !important;
		}
		.bg_op_min {
			background: $nii-theme-color-op-min;
			color: $nii-theme-color;
		}
		.page_bg {
			background: $nii-page-background-light;
		}
		.linear_bg {
			background: linear-gradient(280deg, $nii-theme-color-op-minize 77%, $nii-theme-color-op-min 68%, $nii-page-background-light 4%)
		}
		.border-color-less {
			border-color: $nii-text-less-light !important;
			color:  $nii-text-less-light !important;
		}
		.border-color {
			border: 2rpx solid $nii-theme-color !important;
		}
		.section_bg {
			background: $nii-section-background-light;
			color: $nii-text-light;
		}
		.section {
			background: $nii-section-background-light;
			box-shadow: $nii-section-shadow-light;
			color: $nii-text-light;
		}
		.shadow-less {
			box-shadow: $nii-section-less-shadow-light;
		}
		.shadow-none {
			box-shadow: unset !important;
		}
		.nav_bg {
			background: $nii-nav-background-light;
			color: $nii-text-light;
		}
		.main_text {
			color: $nii-text-light;
		}
		.vice_text {
			color: $nii-text-vice-light;
		}
		.less_text {
			color: $nii-text-less-light;
		}
		.theme_text {
			color: $nii-theme-text-color !important;
		}
	}
	#nii-content.dark {
		background: $nii-page-background-dark;
		color: $nii-text-dark;
		.section {
			background: $nii-section-background-dark;
			box-shadow: $nii-section-shadow-dark;
			color: $nii-text-dark;
		}
		.section_bg {
			background: $nii-section-background-dark;
			color: $nii-text-dark;
		}
		.page_bg_reverse {
			color: $nii-text-light;
			background: $nii-nav-background-light;
		}
		.bg_less {
			background: $nii-text-less-light;
			color: $nii-text-light;
		}
		.shadow-less {
			box-shadow: $nii-section-less-shadow-dark;
		}
		.page_bg {
			background: $nii-page-background-dark;
		}
		.linear_bg {
			background: linear-gradient(280deg, $nii-theme-color-op-minize 77%, $nii-theme-color-op-min 68%, $nii-page-background-dark 4%);
		}
		.border-color-less {
			border-color: $nii-text-less-dark !important;
			color:  $nii-text-less-dark !important;
		}
		.nav_bg {
			background: $nii-nav-background-dark;
			color: $nii-text-dark;
		}
		.main_text {
			color: $nii-text-dark;
		}
		.vice_text {
			color: $nii-text-vice-dark;
		}
		.less_text {
			color: $nii-text-less-dark;
		}
	}
}

//默认padding
.d-padding {
	padding: 0 40rpx;
}

/*页面结构复杂，css样式太多的情况，使用 image 可能导致样式生效较慢，出现 “闪一下” 的情况*/
image{
	will-change: transform
}
/* #ifndef MP-WEIXIN */
/*背景更换等加上过渡*/
uni-image>div, uni-image>img {
	transition: all 0.2s;
	-webkit-transition: all 0.2s;
	transition-timing-function: ease-in-out;
	-webkit-transition-timing-function: ease-in-out; /* Safari and Chrome */
}
/* #endif */

/* 引入字体图标 */
// @font-face {
//   font-family: 'niishop';
//   src: url('~@/static/media/fonts/iconfont/iconfont.woff2') format('woff2'),
// 	   url('~@/static/media/fonts/iconfont/iconfont.woff') format('woff'),
// 	   url('~@/static/media/fonts/iconfont/iconfont.ttf') format('truetype');
// }
/* CDN 服务仅供平台体验和调试使用，平台不承诺服务的稳定性，企业客户需下载字体包自行发布使用并做好备份。 */
// @font-face {
//   font-family: 'niishop';  /* Project id 3581048 */
//  src: url('//at.alicdn.com/t/c/font_3581048_xkyudbh2wd8.woff2?t=1662323172866') format('woff2'),
//         url('//at.alicdn.com/t/c/font_3581048_xkyudbh2wd8.woff?t=1662323172866') format('woff'),
//         url('//at.alicdn.com/t/c/font_3581048_xkyudbh2wd8.ttf?t=1662323172866') format('truetype');
// }
// //字体图标
// .niishop {
//   font-family: "niishop" !important;
//   font-size: 24rpx;
//   font-style: normal;
//   -webkit-font-smoothing: antialiased;
//   -moz-osx-font-smoothing: grayscale;
// }
// /* 引入字体 */
// @font-face {
// 	font-family:'Alegreya-BlackItalic';
// 	// src: url('https://www.niishop.com/static/fonts/alegreya.ttf');
// 	src: url('https://clouds.saas.fddou.com/nii/fonts/alegreya.ttf');
// }
// /* 引入字体 */
// @font-face {
// 	font-family:'DOUYU';
// 	// src: url('https://www.niishop.com/static/fonts/douyuzhuiguang.ttf');
// 	src: url('https://clouds.saas.fddou.com/nii/fonts/douyuzhuiguang.ttf');
// }
//其他样式
.gray_filter {
	filter: grayscale(100%);
}
.transition_03s {
	transition: all 0.3s;
	-webkit-transition: all 0.3s;
}
.transition_04s {
	transition: all 0.5s;
	-webkit-transition: all 0.5s;
}
.transition_05s {
	transition: all 0.5s;
	-webkit-transition: all 0.5s;
}
.transition_1s {
	transition: all 1s;
	-webkit-transition: all 1s;
}
.transition_2s {
	transition: all 2s;
	-webkit-transition: all 2s;
}
.transition_3s {
	transition: all 3s;
	-webkit-transition: all 3s;
}
.transition_4s {
	transition: all 4s;
	-webkit-transition: all 4s;
}
.transition_5s {
	transition: all 5s;
	-webkit-transition: all 5s;
}
.float-start {
    float: left !important
}

.float-end {
    float: right !important
}

.w-100 {
	width: 100% !important
}

.w-fill-available {
	width: -webkit-fill-available !important
}

.top-0 {
	top: 0 !important
}

.left-0 {
	left: 0 !important
}

.right-0 {
	right: 0 !important
}

.bottom-0 {
	bottom: 0 !important
}

.float-none {
    float: none !important
}

.overflow-auto {
    overflow: auto !important
}

.overflow-hidden {
    overflow: hidden !important
}

.overflow-visible {
    overflow: visible !important
}

.overflow-scroll {
    overflow: scroll !important
}

.d-inline {
    display: inline !important
}

.d-inline-block {
    display: inline-block !important
}

.d-block {
    display: block !important
}

.d-grid {
    display: grid !important
}

.d-table {
    display: table !important
}

.d-table-row {
    display: table-row !important
}

.d-table-cell {
    display: table-cell !important
}

.d-flex {
    display: flex !important
}

.d-inline-flex {
    display: inline-flex !important
}

.d-none {
    display: none !important
}

.position-static {
    position: static !important
}

.position-relative {
    position: relative !important
}

.position-absolute {
    position: absolute !important
}

.position-fixed {
    position: fixed !important;
	z-index: 1;
}

.position-sticky {
    position: sticky !important
}

.flex-fill {
    flex: 1 1 auto !important
}

.flex-row {
    flex-direction: row !important
}

.flex-column {
    flex-direction: column !important
}

.flex-row-reverse {
    flex-direction: row-reverse !important
}

.flex-column-reverse {
    flex-direction: column-reverse !important
}

.flex-grow-0 {
    flex-grow: 0 !important
}

.flex-grow-1 {
    flex-grow: 1 !important
}

.flex-shrink-0 {
    flex-shrink: 0 !important
}

.flex-shrink-1 {
    flex-shrink: 1 !important
}

.flex-wrap {
    flex-wrap: wrap !important
}

.flex-nowrap {
    flex-wrap: nowrap !important
}

.flex-wrap-reverse {
    flex-wrap: wrap-reverse !important
}

.justify-content-start {
    justify-content: flex-start !important
}

.justify-content-end {
    justify-content: flex-end !important
}

.justify-content-center {
    justify-content: center !important
}

.justify-content-between {
    justify-content: space-between !important
}

.justify-content-around {
    justify-content: space-around !important
}

.justify-content-evenly {
    justify-content: space-evenly !important
}

.align-items-start {
    align-items: flex-start !important
}

.align-items-end {
    align-items: flex-end !important
}

.align-items-center {
    align-items: center !important
}

.align-items-baseline {
    align-items: baseline !important
}

.align-items-stretch {
    align-items: stretch !important
}

.align-content-start {
    align-content: flex-start !important
}

.align-content-end {
    align-content: flex-end !important
}

.align-content-center {
    align-content: center !important
}

.align-content-between {
    align-content: space-between !important
}

.align-content-around {
    align-content: space-around !important
}

.align-content-stretch {
    align-content: stretch !important
}

.align-self-auto {
    align-self: auto !important
}

.align-self-start {
    align-self: flex-start !important
}

.align-self-end {
    align-self: flex-end !important
}

.align-self-center {
    align-self: center !important
}

.align-self-baseline {
    align-self: baseline !important
}

.align-self-stretch {
    align-self: stretch !important
}

.text-start {
    text-align: left !important
}

.text-end {
    text-align: right !important
}

.text-center {
    text-align: center !important
}

.text-decoration-none {
    text-decoration: none !important
}

.text-decoration-underline {
    text-decoration: underline !important
}

.text-decoration-line-through {
    text-decoration: line-through !important
}

.text-lowercase {
    text-transform: lowercase !important
}

.text-uppercase {
    text-transform: uppercase !important
}

.text-capitalize {
    text-transform: capitalize !important
}

.text-wrap {
    white-space: normal !important
}

.text-nowrap {
    white-space: nowrap !important
}

.text-break {
    word-wrap: break-word !important;
    word-break: break-word !important
}

.fst-italic {
    font-style: italic !important
}

.fst-normal {
    font-style: normal !important
}

.fw-light {
    font-weight: 300 !important
}

.fw-lighter {
    font-weight: lighter !important
}

.fw-normal {
    font-weight: 400 !important
}

.fw-bold {
    font-weight: 500 !important
}

.fw-bolder {
    font-weight: 600 !important
}
